<!DOCTYPE html>
<!-- include aframe -->
<script src="vendor/aframe/build/aframe.js"></script>
<!-- include aframe-ar.js -->
<script src="../build/aframe-ar.js"></script>

<body style='margin : 0px; overflow: hidden; font-family: Monospace;'><div style='position: fixed; top: 10px; width:100%; text-align: center; z-index: 1;'>
	<a href="https://github.com/jeromeetienne/AR.js/" target="_blank">AR.js</a> - mobile performance in a-frame
	<br/>
	Contact me any time at <a href='https://twitter.com/jerome_etienne' target='_blank'>@jerome_etienne</a>
</div>
	<!-- enable artoolkit on this scene -->
	<a-scene stats embedded arjs='sourceType: webcam; detectionMode: mono; maxDetectionRate: 30; canvasWidth: 240; canvasHeight: 180'>

		<!-- define the object which gonna be put on this marker  -->
		<a-box position='0 0.5 0' material='opacity: 0.5; side: double'>
			<a-torus-knot radius='0.26' radius-tubular='0.05'>
				<a-animation attribute="rotation" to="360 0 0" dur="3000" easing='linear' repeat="indefinite"></a-animation>
			</a-torus-knot>
		</a-box>

		<a-marker-camera preset='hiro'></a-marker-camera>
	</a-scene>
</body>
</html>
